<template>
    <div class="sidebar">
            <el-menu
            background-color="#333744"
            text-color="#fff"
            active-text-color="#409BFF"
            :unique-opened="true"
            :collapse-transition="false"
            :router="true"
          >
            <!-- 一级菜单 -->
            <el-submenu
              :index="item.id + ''"
              v-for="item in menulist"
              :key="item.id"
            >
              <!-- 一级菜单模板区 -->
              <template slot="title">
                <!-- 图标 -->
                <i :class="IconImgs[item.id]"></i>
                <!-- 文本 -->
                <span>{{ item.authName }}</span>
              </template>

              <!-- 二级菜单 -->
              <el-menu-item
                :index="'/' + subItem.path"
                v-for="subItem in item.children"
                :key="subItem.id"
              >
                <template slot="title">
                  <!-- 图标 -->
                  <i class="el-icon-menu"></i>
                  <!-- 文本 -->
                  <span>{{ subItem.authName }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
    </div>
</template>

<script>
import bus from './bus'
export default {
  data () {
    return {
      collapse: false,
      // 左侧菜单数据
      menulist: [{
        'id': 100,
        'authName': '监控管理',
        'path': null,
        'children': [
          {
            'id': 101,
            'authName': '监控列表',
            'path': 'stations',
            'children': []
          }
        ]
      },
      {
        'id': 200,
        'authName': '历史查询',
        'path': null,
        'children': [
          {
            'id': 201,
            'authName': '历史列表',
            'path': 'Logs',
            'children': []
          }
        ]
      },
      {
        'id': 300,
        'authName': '系统管理',
        'path': null,
        'children': [
          {
            'id': 301,
            'authName': '系统设置',
            'path': 'Setting',
            'children': []
          }
        ]
      }
      ],
      // 左侧图标
      IconImgs: {
        '100': 'iconfont icon-dingdan',
        '200': 'iconfont icon-paihangbang',
        '301': 'iconfont icon-lihe',
        '300': 'iconfont icon-mingxinghuodong',
        '145': 'iconfont icon-shangquan'
      }
    }
  },
  computed: {
    onRoutes () {
      return this.$route.path.replace('/', '')
    }
  },
  created () {
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on('collapse', msg => {
      this.collapse = msg
      bus.$emit('collapse-content', msg)
    })
  }
}
</script>

<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 150px;
}
.sidebar > ul {
    height: 100%;
}
</style>
